<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <!-- 订单管理上面部分 -->
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
        >
          <el-row :gutter="60">
            <!-- 订单编号 -->
            <el-col :span="8">
              <el-form-item
                label="订单编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="form.id"
                  placeholder="请输入订单编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 订单状态 -->
            <el-col :span="8">
              <el-form-item
                label="订单状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="form.status"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in selectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 付费状态 -->
            <el-col :span="8">
              <el-form-item
                label="付费状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  v-model="form.paymentStatus"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in paymentStatusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 发件人姓名 -->
            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="form.senderName"
                  placeholder="请输入发件人姓名"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="发件人电话:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="form.senderPhone"
                  placeholder="请输入发件人电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 发件人地址 -->
            <el-col :span="8">
              <el-form-item
                label="发件人地址:"
                label-width="110px"
              >
                <el-row
                  :gutter="24"
                  style="margin: 0"
                >
                  <!-- 请选择省 -->
                  <el-col
                    :span="8"
                    style="padding: 0"
                  >
                    <el-select
                      v-model="form.senderProvinceId"
                      placeholder="请选择省"
                      value-key="id"
                      clearable
                      @change="getSenderProvince"
                    >
                      <el-option
                        v-for="item in provinceList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- 请选择市 -->
                  <el-col
                    :span="8"
                    style="padding: 0 4px"
                  >
                    <el-select
                      v-model="form.senderCityId"
                      clearable
                      placeholder="请选"
                      @change="getSenderCity"
                    >
                      <el-option
                        v-for="item in cityList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- 请选择县 -->
                  <el-col
                    :span="8"
                    style="padding: 0"
                  >
                    <el-select
                      v-model="form.senderCountyId"
                      value-key="id"
                      clearable
                      placeholder="请选县/区"
                      @change="getArea"
                    >
                      <el-option
                        v-for="item in countryList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-row> </el-form-item>
            </el-col>
            <!-- 收件人姓名 -->
            <el-col :span="8">
              <el-form-item
                label="收件人姓名:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="form.receiverName"
                  placeholder="请输入收件人姓名"
                >
                </el-input></el-form-item>
            </el-col>
            <!-- 收件人电话 -->
            <el-col :span="8">
              <el-form-item
                label="收件人电话:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  placeholder="请输入收件人电话"
                >
                </el-input></el-form-item>
            </el-col>
            <!-- 收件人地址 -->
            <el-col :span="8">
              <el-form-item
                label="收件人地址:"
                label-width="110px"
              >
                <el-row
                  :gutter="24"
                  style="margin: 0"
                >
                  <!-- 获取省 -->
                  <el-col
                    :span="8"
                    style="padding: 0"
                  >
                    <el-select
                      v-model="form.receiverProvinceId"
                      placeholder="请选择省"
                      value-key="id"
                      clearable
                      @change="getProvinceReceiver"
                    >
                      <el-option
                        v-for="item in provinceList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- 获取市区 -->
                  <el-col
                    :span="8"
                    style="padding: 0 4px"
                  >
                    <el-select
                      v-model="form.receiverCityId"
                      placeholder="请选择市"
                      clearable
                      @change="getReceiverCity"
                    >
                      <el-option
                        v-for="item in receiverCityList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- 获取县/区 -->
                  <el-col
                    :span="8"
                    style="padding: 0"
                  >
                    <el-select
                      v-model="form.receiverCountyId"
                      value-key="id"
                      clearable
                      placeholder="请选择县/区"
                      @change="getReceiverArea"
                    >
                      <el-option
                        v-for="item in countryReceiverList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-row> </el-form-item>
            </el-col>
            <!-- 搜索重置 -->
            <el-col
              :span="8"
              style="padding-left:50px"
            >
              <el-button
                type="warning"
                @click="handleFilter('查询')"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm('form')"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 数据渲染 -->
      </el-card>
      <!-- 订单管理下部分数据渲染 -->
      <div
        style="margin-top: 20px"
      >
        <el-card
          shadow="never"
        >
          <div

            slot="empty"
          >
            <img
              src="@/icons/pic-kong@2x.png"
              alt="img"
              style="margin-top: 20px;width: 14%;height: 14%;"
            >
            <p
              style="
          margin-top: -20px;
          padding-bottom: 0px;
          "
            >这里空空如也</p>
          </div>
          <!-- 数据 -->
          <el-table
            :key="tableKey"
            ref="multipleTable"
            :data="dataList"
            fit
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
            @selection-change="handleSelectionChange"
          >
            <!-- 空空如也 -->
            <el-card
              v-show="(!dataList || dataList.length <= 0) && !listLoading && !searchkey"
              slot="empty"
              shadow="never"
            >
              <img
                src="@/icons/pic-kong.png"
                alt="img"
                style="margin-top: 20px;width: 20%;height: 20%;"
              >
              <p
                style="
          margin-top: -20px;
          padding-bottom: 0px;
          "
              >这里空空如也</p>
            </el-card>

            <!-- 序号 -->
            <el-table-column
              prop="date"
              label="序号"
              width="70"
            >
              <template slot-scope="scope">
                <span>
                  {{
                    scope.$index +
                      (form.page - 1) *
                      form.pageSize +
                      1
                  }}
                </span>
              </template>
            </el-table-column>
            <!-- 订单编号 -->
            <el-table-column
              prop="name"
              label="订单编号"
              width="170"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.id }}
                </span>
              </template>
            </el-table-column>
            <!-- 运单编号 -->
            <el-table-column
              prop="province"
              label="运单编号"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.transportOrder === null
                      ? ''
                      : scope.row.transportOrder.id
                  }}
                </span>
              </template>
            </el-table-column>
            <!-- 下单时间 -->
            <el-table-column
              label="下单时间"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.createTime }}
                </span>
              </template>
            </el-table-column>
            <!-- 订单状态 -->
            <el-table-column
              label="订单状态"
              width="90"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status == ' 23000'">待取件</span>
                <span v-else-if="scope.row.status == '23001'">已取件</span>
                <span v-else-if="scope.row.status == '23002'">网点自寄</span>
                <span v-else-if="scope.row.status == '23003'">网点入库</span>
                <span v-else-if="scope.row.status == '23004'">待装车</span>
                <span v-else-if="scope.row.status == '23005'">运输中</span>
                <span v-else-if="scope.row.status == '23006'">网点出库</span>
                <span v-else-if="scope.row.status == '23007'">待派送</span>
                <span v-else-if="scope.row.status == '23008'">派送中</span>
                <span v-else-if="scope.row.status == '23009'">已签收</span>
                <span v-else-if="scope.row.status == '23010'">拒收</span>
                <span v-else>已取消</span>
              </template>
            </el-table-column>
            <!-- 发件人姓名 -->
            <el-table-column
              label="发件人姓名"
              width="100"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.senderName }}
                </span>
              </template>
            </el-table-column>
            <!-- 发件人电话 -->
            <el-table-column
              prop="zip"
              label="发件人电话"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.senderPhone }}
                </span>
              </template>
            </el-table-column>
            <!-- 发件人地址 -->
            <el-table-column
              prop="zip"
              label="发件人地址"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.senderProvince === null
                    ? ''
                    : scope.row.senderProvince.name
                }}</span>
                <span>{{
                  scope.row.senderCity === null ? '' : scope.row.senderCity.name
                }}</span>
                <span>{{
                  scope.row.senderCounty === null
                    ? ''
                    : scope.row.senderCounty.name
                }}</span>
                <span>
                  {{ scope.row.receiverAddress }}
                </span>
              </template>
            </el-table-column>
            <!-- 收件人姓名 -->
            <el-table-column
              label="收件人姓名"
              width="100"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.receiverName }}
                </span>
              </template>
            </el-table-column>
            <!-- 收件人电话 -->
            <el-table-column
              label="收件人电话"
              width="120"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.receiverPhone }}
                </span>
              </template>
            </el-table-column>
            <!-- 收件人地址 -->
            <el-table-column
              label="收件人地址"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.receiverProvince === null
                    ? ''
                    : scope.row.receiverProvince.name
                }}</span>
                <span>{{
                  scope.row.receiverCity === null
                    ? ''
                    : scope.row.receiverCity.name
                }}</span>
                <span>{{
                  scope.row.receiverCounty === null
                    ? ''
                    : scope.row.receiverCounty.name
                }}</span>
                <span>{{ scope.row.receiverAddress }}</span>
              </template>
            </el-table-column>
            <!-- 取件类型 -->
            <el-table-column
              label="取件类型"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.pickupType == 1">网点自寄</span>
                <span v-else>上门取件</span>
              </template>
            </el-table-column>
            <!-- 付费类型 -->
            <el-table-column
              prop="zip"
              label="付费类型"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentMethod == 1">预结</span>
                <span v-else>到付</span>
              </template>
            </el-table-column>
            <!-- 付费状态 -->
            <el-table-column
              label="付费状态"
              width="120"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.paymentStatus == 1">未付</span>
                <span v-else>已付</span>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="85"
            >
              <template slot-scope="scope">
                <el-link
                  v-if="
                    scope.row.status == '23002' && scope.row.pickupType == 1
                  "
                  type="primary"
                  :underline="false"
                  @click="handleOrderDetail(scope.row.id, scope.row.pickupType)"
                >编辑详情</el-link>
                <el-link
                  v-else
                  type="primary"
                  :underline="false"
                  @click="
                    handleOrderDetail(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )
                  "
                >查看详情</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 页数 -->
          <template>
            <div class="pagination">
              <el-pagination
                :current-page="form.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Number(total)"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </template>
        </el-card>
      </div>
    </div>

  </div>
</template>
<script>
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
import { areaList } from '@/api/common'
export default {
  data() {
    return {
      multipleSelection: [],
      cityList: [],
      countryList: [],
      provinceList: [],
      receiverCityList: [],
      countryReceiverList: [],
      listLoading: true,
      total: null,
      tableKey: 0,
      searchkey: false,
      form: {
        amount: '',
        createTime: '',
        estimatedArrivalTime: '',
        id: '',
        memberId: '',
        orderType: '',
        page: 1,
        pageSize: 10,
        paymentMethod: '',
        paymentStatus: '',
        pickupType: '',
        receiverAddress: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderAddress: '',
        senderCityId: '',
        senderCountyId: '',
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        status: ''
      },
      requestParamsProvince: {},
      dataList: [],
      paymentStatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      value: []
    }
  },
  created() {
    this.getoptions()
    this.initialDate()
    this.showcity()
    this.form.status = this.$route.query.status ? Number(this.$route.query.status) : '' // 三元表达式判断是否有值
  },
  methods: {
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 数据变化时触发，赋予数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getoptions() {
      this.selectList = options
    },
    // 获取省
    async showcity() {
      this.requestParamsProvince.parentId = 0
      const { data: res } = await areaList(this.requestParamsProvince)
      this.provinceList = res
    },
    // 获取发件人地址
    async getSenderProvince(vId) {
      if (this.form.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.form.senderProvinceId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.cityList = res
      }
      // 重置市区
      this.form.senderCityId = ''
      // 新添加的
      this.form.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find((item) => {
          return item.id === vId
        })
        this.form.senderProvinceId = obj.id
      }
    },
    // 参照权限写法，不敢改
    async getCity() {
      if (this.form.senderProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.form.senderCityId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.countryList = res
        this.form.senderCountyId = ''
      }
    },
    // 获取市区ID
    getSenderCity(vId) {
      // TODO
      this.form.senderCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.cityList.find((item) => {
          return item.id === vId
        })
        this.getCity()
        this.form.senderCityId = obj.id
      }
    },
    // 新增县地址
    getArea() {
      if (this.form.senderCountyId !== '') {
        let obj = {}
        obj = this.countryList.find((item) => {
          return item.id === this.form.senderCountyId
        })
        this.form.senderCountyId = obj.id
      }
    },
    // 获取收件地址
    async getProvinceReceiver(vId) {
      if (this.form.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.form.receiverProvinceId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.receiverCityList = res
      }
      this.form.receiverCityId = ''

      // TODO
      this.form.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.provinceList.find((item) => {
          return item.id === vId
        })
        this.form.receiverProvinceId = obj.id
      }
    },
    // 参照权限写法，不敢改
    async receiverCity() {
      if (this.form.receiverProvinceId !== 0) {
        this.requestParamsProvince.parentId =
          this.form.receiverCityId
        const { data: res } = await areaList(this.requestParamsProvince)
        this.countryReceiverList = res
        this.form.receiverCountyId = ''
      }
    },
    // 获取市区ID
    getReceiverCity(vId) {
      // TODO
      this.form.receiverCountyId = ''
      if (vId !== '') {
        let obj = {}
        obj = this.receiverCityList.find((item) => {
          return item.id === this.form.receiverCityId
        })
        this.receiverCity()
        this.form.receiverCityId = obj.id
      }
    },
    // 新增县地址
    getReceiverArea() {
      if (this.form.receiverCountyId !== '') {
        let obj = {}
        obj = this.countryReceiverList.find((item) => {
          return item.id === this.form.receiverCountyId
        })
        this.form.receiverCountyId = obj.id
      }
    },
    async getList() {
      this.listLoading = true
      // 查询
      const { data: res } = await orderList(this.form)
      this.listLoading = false
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
    },
    // 重置
    resetForm(formData) {
      // this.getList()
      this.$refs[formData].resetFields()
      this.cityList = {}
      this.form.page = 1
      this.form.pageSize = 10
      this.form.id = ''
      this.form.status = ''
      this.form.paymentStatus = ''
      this.form.senderName = ''
      this.form.senderPhone = ''
      this.form.receiverName = ''
      this.form.receiverPhone = ''

      this.form.receiverCityId = ''
      this.form.receiverCountyId = ''
      this.form.receiverProvinceId = ''

      this.form.senderProvinceId = ''
      this.form.senderCityId = ''
      this.form.senderCountyId = ''
      this.searchkey = false
      this.getList()
    },
    // 搜索信息
    handleFilter(opt) {
      this.form = {
        ...this.form,
        status:
          this.form.status === 0
            ? ''
            : this.form.status
        // page: opt === '查询' ? 1 : this.form.page
      }
      this.form.page = 1
      this.getList(this.form)
      this.searchkey = true
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.form.pageSize = val
      if (this.form.page === 1) {
        this.getList(this.form)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.form.page = val
      this.getList()
    },
    // 订单详情
    handleOrderDetail(id, status, pickupType, transportOrderId) {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({
        path: '/business/edit-order',
        query: { orderId: id, status: status, pickUpType: pickupType, transportOrderId }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  justify-content: center;
  display: -webkit-box;
  -webkit-box-pack: center;
      margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
